<template>
    <view class="bg-[#F5F7F9] relative min-h-screen">
        <up-navbar title=" " :safeAreaInsetTop="true" bgColor="transparent" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback" color="#fff"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome" color="#fff"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="blurBG"></view>
        <view class="flex flex-col items-center py-[50rpx] relative z-10">
            <view class="text-[48rpx] text-[#fff] font-bold mb-[10rpx]">￥{{ Info.amount }}</view>
            <view class="text-[#fff] text-[26rpx] font-normal mb-[32rpx]">可提现金额</view>
            <view @click="GoToLink" class="px-[40rpx] py-[16rpx] text-[#fff] text-[26rpx] font-normal border-[1rpx] border-[#fff] rounded-[100rpx]">金额明细>></view>
        </view>
        <view class="mx-[30rpx] my-[24rpx] bg-[#fff] rounded-[16rpx] p-[24rpx]">
            <view class="text-[32rpx] text-[#000] font-normal mb-[40rpx]">提现到</view>
            <view class="flex justify-between items-center mb-[20rpx]" @click="type = 0">
                <view class="flex items-center">
                    <image src="../static/wx.png" mode="scaleToFill" class="w-[48rpx] h-[48rpx] block mr-[16rpx]"/>
                    <view class="text-[32rpx] text-[#333] font-normal">微信</view>
                </view>
                <view>
                    <image v-if="type == 0" src="../static/gou.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                    <image v-else src="../static/kuang.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                </view>
            </view>
            <view class="flex justify-between items-center" @click=" type = 1 ">
                <view class="flex items-center">
                    <image src="../static/qianbao.png" mode="scaleToFill" class="w-[48rpx] h-[48rpx] block mr-[16rpx]"/>
                    <view class="text-[32rpx] text-[#333] font-normal">钱包</view>
                </view>
                <view>
                    <image v-if="type == 1" src="../static/gou.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                    <image v-else src="../static/kuang.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block"/>
                </view>
            </view>
        </view>
        <view class="mx-[30rpx] my-[24rpx] bg-[#fff] rounded-[16rpx] p-[24rpx] flex justify-between items-center">
            <view class="text-[32rpx] color-[#333] font-normal">微信手机号</view>
            <view class="text-[32rpx] color-[#333] font-normal">{{ Info.phone }}</view>
        </view>
        <view class="bg-[#fff] mx-[30rpx] my-[24rpx] rounded-[16rpx] p-[24rpx] flex justify-between items-center">
            <view class="text-[32rpx] text-[#333] font-normal">提现金额</view>
            <view>
                <up-input placeholder="请输入提现金额" border="none" v-model="amount" inputAlign="right"></up-input>
            </view>
        </view>
        <view class="mt-[48rpx] mx-[30rpx] mb-[150rpx]">
            <view class="ml-[24rpx] text-[32rpx] text-[#333] font-normal mb-[24rpx]">提现须知</view>
            <view class="ml-[24rpx] text-[32rpx] text-[#333] font-normal">1.提现限制条件；</view>
            <view class="ml-[24rpx] text-[32rpx] text-[#333] font-normal ">2.如每日提现次数限制；</view>
            <view class="ml-[24rpx] text-[32rpx] text-[#333] font-normal ">3.有没有手续费，手续费最低多少；</view>
            <view class="ml-[24rpx] text-[32rpx] text-[#333] font-normal ">4.提现到账预计时间，如未到账请联系客服。</view>
        </view>
        <view @click="Submirt" class="mx-[30rpx] py-[20rpx] text-[32rpx] text-[#fff] font-normal bg-[#46A7FD] rounded-[16rpx] text-center">确认提现</view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { userQuery, userWithdraw } from '../../API/ReceivingHall'
const { Submirt } = useBtn()
const { goback , gohome } = useTab()
const { getInfo , Info , type , resource , amount , GoToLink } = useInfo()
function useTab(){
    const goback = ()=>{
        uni.navigateBack()
    }
    const gohome = ()=>{
        uni.switchTab({
            url:'/pages/index/index'
        })
    }
    return{
        goback,gohome
    }
}
function useInfo(){
    const Info = ref({})
    const type = ref(0)
    const resource = ref(6)
    const amount = ref('')
    const getInfo = async()=>{
        let { data } = await userQuery(6)
        Info.value = data
    }
    const GoToLink = async()=>{
        uni.navigateTo({
            url:`/community/WithdrawalDetails/WithdrawalDetails?resource=${resource.value}`
        })
    }
    return{ getInfo , Info , type , resource , amount , GoToLink }
}
function useBtn(){
    const Submirt = async ()=>{
        let { data } = await userWithdraw({
            amount:amount.value,
            type:type.value,
            resource:resource.value
        })
        uni.showToast({
            title: '提现成功',
            icon: 'none'
        })
        await getInfo()
    }
    return{
        Submirt
 }
}
onLoad(async(options)=>{
    resource.value = options.resource
    await getInfo()
})
</script>

<style lang="scss" scoped>
.blurBG{
    top: 0;
    left: 0;
    width: 100%;
    height: 480rpx;
    position: absolute;
    background: linear-gradient( 90deg, #5578F3 0%, #69A7F6 100%);
}
</style>